<template>
  <div class="container">
    <van-tabs color="#0077FF" v-model="active" @click="onClickTab">
      <van-tab title="隐患待办">
        <div class="topSelect">
          <div
            :class="['selectItem', activeNum == 1 ? 'activeSelectItem' : '']"
            @click="onClick(1)"
          >
            待我整改
          </div>
          <div
            @click="onClick(2)"
            :class="['selectItem', activeNum == 2 ? 'activeSelectItem' : '']"
          >
            待我验收
          </div>
        </div>
        <div class="taskList">
          <div class="taskItem" v-for="item in problemList" :key="item.id">
            <div class="topItem">
              <div class="taskStatus" v-if="item.changeStatus == 1">
                {{ item.changeStatusName }}
              </div>
              <div class="taskStatus greenColor" v-if="item.changeStatus == 2">
                {{ item.checkResponerStatusName }}
              </div>
              <div class="taskLeft">
                <img :src="item.dangerImg1" alt="" />
              </div>
              <div class="taskRight">
                <div class="taskTitle">{{ item.dangerName }}</div>
                <div class="taskSubTitle">
                  {{ item.dangerDescribe }}
                </div>
                <div class="taskLabel">
                  <div class="taskLabelItem">
                    {{ item.dangerGradeName }}
                  </div>
                  <div class="taskLabelItem">{{ item.governKindName }}</div>
                </div>
                <div class="taskDate">登记时间:{{ item.createdTime }}</div>
              </div>
            </div>
            <div class="bottomItem">
              <div
                class="statusBox"
                v-if="item.changeStatus == 1"
                @click="goChange(item)"
              >
                去整改
              </div>
              <div class="statusBox" v-else @click="goChange(item)">去验收</div>
            </div>
          </div>
          <div v-if="!problemList.length">
            <van-empty description="暂无整验收任务" />
          </div>
        </div>
      </van-tab>
      <van-tab title="作业待办">
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item
            @change="dropDown"
            v-model="value1"
            :options="option1"
          />
        </van-dropdown-menu>
        <div class="submitList">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              class="submitItem"
              v-for="item in listData"
              :key="item.id"
              @click="goDetail2(item)"
            >
              <div class="typeTitle">
                <div class="left">{{ item.ticketTypeCodeName }}</div>
                <div class="right">{{ item.nodeName }}</div>
              </div>
              <div class="msgBox">
                <div class="msgItem">
                  <div class="left">作业票编号:</div>
                  <div class="right">{{ item.ticketNo }}</div>
                </div>
                <div class="msgItem">
                  <div class="left">开始时间:</div>
                  <div class="right">{{ item.startTime }}</div>
                </div>
                <div class="msgItem">
                  <div class="left">结束时间:</div>
                  <div class="right">{{ item.endTime }}</div>
                </div>
                <div class="msgItem">
                  <div class="left">状态:</div>
                  <div class="right2">{{ item.statusName }}</div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    <tabbar :activeIndex.sync="nowActive"></tabbar>
  </div>
</template>

<script>
import { pageApproveApi, workTypeApi } from '@/api/ticket'

import { toDoListApi } from '@/api/index'

import tabbar from '@/components/tabbar'
export default {
  name: 'myTodoList',
  props: {},
  components: {
    tabbar,
  },
  data() {
    return {
      nowActive: 2,
      active: 0,
      value1: '',
      option1: [],
      loading: false,
      finished: false,
      listData: [],
      config: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      isLoginMsg: {},
      active2: 2,
      activeNum: 1,
      problemList: [],
      upCode: '所有作业票',
    }
  },
  mounted() {
    this.isLoginMsg = JSON.parse(sessionStorage.getItem('loginInfo'))
  },
  created() {
    this.isLoginMsg = JSON.parse(sessionStorage.getItem('loginInfo'))
    console.log(this.$route.query)
    this.active = +this.$route.query.activeIndex
    if (this.active == 1) {
      this.pageSubmitApiGet()
    }
    this.workTypeApiGet()
    this.getTodoList()
  },
  methods: {
    onClickTab(e) {
      if (e == 0) {
        this.getTodoList()
      } else if (e == 1) {
        this.pageSubmitApiGet()
      }
    },
    dropDown(e) {
      console.log(e)
      this.pageSubmitApiGet()
    },
    async workTypeApiGet() {
      const res = await workTypeApi()
      this.option1 = [{ text: '所有作业票', value: '' }].concat(
        res.data.map((item) => ({
          text: item.name,
          value: item.code,
        }))
      )
    },
    // goDetail2(item) {
    //   if (item.status == 0) {
    //     this.$router.push({
    //       path: '/workResponsible',
    //       query: {
    //         id: item.id,
    //         code: item.code,
    //         codeName: item.codeName,
    //       },
    //     })
    //   } else if (item.status == 1) {
    //     if (item.analysisOpinion[0].peopleStatus == null) {
    //       this.$router.push({
    //         path: '/dataAnalysis',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     } else if (item.measureOpinion[0].peopleStatus == null) {
    //       this.$router.push({
    //         path: '/safetyMeasure',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     }
    //   } else if (item.status == 2) {
    //     if (item.analysisOpinion[0].peopleStatus == null) {
    //       this.$router.push({
    //         path: '/dataAnalysis',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     } else if (item.measureOpinion[0].peopleStatus == null) {
    //       this.$router.push({
    //         path: '/safetyMeasure',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     } else if (
    //       item.measureOpinion[0].peopleImage == null ||
    //       item.measureOpinion[0].peopleImage == ''
    //     ) {
    //       this.$router.push({
    //         path: '/taskConfirm',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     } else {
    //       this.$router.push({
    //         path: '/approveWork',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     }
    //   } else if (item.status == 3) {
    //     if (
    //       item.safetyerOpinion[0].peopleImage == null ||
    //       item.safetyerOpinion[0].peopleImage == '' ||
    //       item.firePeopleOpinion[0].peopleImage == null ||
    //       item.firePeopleOpinion[0].peopleImage == '' ||
    //       item.guardianOpinion[0].peopleImage == null ||
    //       item.guardianOpinion[0].peopleImage == ''
    //     ) {
    //       this.$router.push({
    //         path: '/approveWork',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     } else {
    //       this.$router.push({
    //         path: '/approveWorkStatus4',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     }
    //   } else if (item.status == 4) {
    //     if (
    //       item.principalOpinion[0].peopleImage == null ||
    //       item.principalOpinion[0].peopleImage == '' ||
    //       item.unitOpinion[0].peopleImage == null ||
    //       item.unitOpinion[0].peopleImage == '' ||
    //       item.safetyManagementOpinion[0].peopleImage == null ||
    //       item.safetyManagementOpinion[0].peopleImage == ''
    //     ) {
    //       this.$router.push({
    //         path: '/approveWorkStatus4',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     } else {
    //       this.$router.push({
    //         path: '/approveWorkStatus5',
    //         query: {
    //           id: item.id,
    //           code: item.code,
    //           codeName: item.codeName,
    //         },
    //       })
    //     }
    //   } else if (item.status == 5) {
    //     this.$router.push({
    //       path: '/approveWorkStatus6',
    //       query: {
    //         id: item.id,
    //         code: item.code,
    //         codeName: item.codeName,
    //       },
    //     })
    //   } else if (item.status == 6) {
    //     this.$router.push({
    //       path: '/approveWorkStatus7',
    //       query: {
    //         id: item.id,
    //         code: item.code,
    //         codeName: item.codeName,
    //       },
    //     })
    //   } else if (item.status == 7) {
    //     this.$router.push({
    //       path: '/approveWorkStatus8',
    //       query: {
    //         id: item.id,
    //         code: item.code,
    //         codeName: item.codeName,
    //       },
    //     })
    //   }
    // },

    goDetail2(item) {
      this.$router.push({
        path: '/approveWork9',
        query: {
          id: item.id,
          code: item.ticketTypeCode,
          codeName: item.ticketTypeCodeName,
          nodeName: item.nodeName,
          approverName: item.approverName,
          approverId: item.approverId,
        },
      })
    },
    // async getBackLogApiList() {
    //   const findItem = this.option1.find((item) => item.value === this.value1)
    //   this.upCode = findItem ? findItem.text : null
    //   const formData = {
    //     id: this.isLoginMsg.userId,
    //     // page: this.config.page,
    //     // pageSize: this.config.pageSize,
    //     printingJobType: this.upCode == '所有作业票' ? '' : this.upCode,
    //   }
    //   const res = await getBackLogApi(formData)
    //   this.listData = res.data

    //   // // 如果正在加载或已加载完成，则返回
    //   // if (this.loading || this.finished) return

    //   // this.loading = true
    //   // try {
    //   //   const formData = {
    //   //     id: this.isLoginMsg.userId,
    //   //     page: this.config.page,
    //   //     pageSize: this.config.pageSize,
    //   //   }
    //   //   const res = await getBackLogApi(formData)
    //   //   if (res.code === 0) {
    //   //     const data = res.data || []

    //   //     // 如果是第一页，直接替换数据
    //   //     if (this.config.page === 1) {
    //   //       this.listData = data
    //   //     } else {
    //   //       // 否则追加数据
    //   //       this.listData = [...this.listData, ...data]
    //   //     }
    //   //     // 判断是否还有更多数据
    //   //     if (data.length < this.config.pageSize) {
    //   this.finished = true
    //   //     } else {
    //   //       this.config.page++
    //   //     }
    //   //   }
    //   // } catch (error) {
    //   //   console.error('加载数据失败:', error)
    //   // } finally {
    //   // this.loading = false
    //   // }
    // },
    async pageSubmitApiGet() {
      const formData = {
        // id: this.isLoginMsg.userId,
        pageNo: this.config.page,
        pageSize: this.config.pageSize,
        ticketTypeCode: this.upCode == '所有作业票' ? '' : this.upCode,
      }
      const res = await pageApproveApi(formData)
      this.listData = res.data.records

      this.finished = true
    },
    onLoad() {
      this.isLoginMsg = JSON.parse(sessionStorage.getItem('loginInfo'))
      // this.getBackLogApiList()
    },
    onClick(e) {
      this.activeNum = e
      this.getTodoList()
    },
    async getTodoList() {
      const res = await toDoListApi({
        id: JSON.parse(sessionStorage.getItem('loginInfo')).userId,
        changeOrResponer: this.activeNum,
      })
      this.problemList = res.data.data
    },
    goChange(item) {
      this.$router.push({
        path: '/problemDetailChange',
        query: {
          id: item.id,
        },
      })
    },
  },

  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background: #f5f6f7;
  // padding-bottom: 80px;
}
.submitList {
  padding: 12px 16px;
  padding-bottom: 80px;
  background: #f5f6f7;

  .submitItem {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    .typeTitle {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #dbe0e7;
      .left {
        font-weight: bold;
      }
      .right {
        color: #525459;
      }
    }
    .msgBox {
      padding: 10px;
      font-size: 12px;
      .msgItem {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #dbe0e7;
        color: #525459;
        .right2 {
          color: #0077ff;
        }
      }
      .msgItem:last-child {
        border: none;
        padding-bottom: 0;
      }
    }
  }
}
.taskList {
  padding: 0 15px;

  padding-top: 10px;
  padding-bottom: 50px;
  .taskItem {
    // height: 108px;
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    margin-bottom: 12px;
    .topItem {
      display: flex;
      align-items: center;
      .taskStatus {
        position: absolute;
        right: 0;
        top: 0;
        background-color: #00b9c7;
        width: 52px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: #fff;
        border-radius: 0 8px 0 8px;
        font-size: 12px;
      }
      .taskLeft {
        img {
          width: 80px;
          height: 80px;
        }
      }
      .taskRight {
        margin-left: 10px;
        border-bottom: 1px solid #eef1f0;
        padding-bottom: 5px;
        .taskTitle {
          font-size: 14px;
          font-weight: bold;
          color: #3a3d3c;
        }
        .taskSubTitle {
          font-size: 10px;
          font-weight: bold;
          color: #616463;
          margin: 6px 0;
        }
        .taskLabel {
          display: flex;
          margin-bottom: 8px;
          .taskLabelItem {
            width: 48px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: #f1f5f3;
            font-size: 10px;
            margin-right: 10px;
          }
        }
        .taskDate {
          font-size: 10px;
          font-weight: bold;
          color: #939c98;
        }
      }
    }
    .bottomItem {
      display: flex;
      justify-content: right;
      .statusBox {
        width: 60px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #d7dddb;
        font-size: 12px;
        margin-top: 12px;
      }
    }
  }
}
.topSelect {
  background-color: #e5e8eb;
  display: flex;
  padding: 4px;
  border-radius: 8px;
  margin: 0 15px;
  margin-top: 10px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  .selectItem {
    width: 50%;
  }
  .activeSelectItem {
    background-color: #fff;
    color: #0077ff;
  }
}
</style>
